<template>
  <div class="body-project">
    <div class="dashboard_title flex justify-between pr-4">
      <div>项目统计</div>
      <div class="page_config">
        <Button @click="onPre" :disabled="_num <= 0" class="left">
          <template #icon>
            <CaretLeftOutlined />
          </template>
        </Button>
        <Button @click="onNext" :disabled="(_num + 1) * 6 >= _total">
          <template #icon>
            <CaretRightOutlined />
          </template>
        </Button>
      </div>
    </div>
    <div id="project" ref="project"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
import { Button } from 'ant-design-vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
// echarts theme
import { getProject } from '@/api/home';

const onPre = () => {
  if (_num.value <= 0) return;
  _num.value--;
  nextTick(() => {
    init();
  });
};
const onNext = () => {
  if ((_num.value + 1) * 6 >= _total.value) return;
  _num.value++;
  nextTick(() => {
    init();
  });
};
const _num = ref(0);
const _total = ref(0);
const _xAxis = computed(() => {
  const data = xAxis.value.slice(_num.value * 6, _num.value * 6 + 6);

  return data;
});
const _dataInfo = computed(() => {
  const info = data.value.slice(_num.value * 6, _num.value * 6 + 6);

  return info;
});
const maxValue = computed(() => {
  const max = Math.max(..._dataInfo.value);
  const max2 = Math.max(...data.value);
  return max || max2 || 10;
});
const extension = (chart: any) => {
  var elementDiv = document.getElementById('extension');
  if (!elementDiv) {
    var div = document.createElement('div');
    div.setAttribute('id', 'extension');
    div.style.display = 'block';
    document.querySelector('html').appendChild(div);
  }
  chart.on('mouseover', function (params) {
    if (params.componentType == 'xAxis') {
      var elementDiv = document.querySelector('#extension');
      //设置悬浮文本的位置以及样式
      var elementStyle =
        'position: absolute;z-index: 99999;color: #000;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #fff;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px';
      elementDiv.style.cssText = elementStyle;
      elementDiv.innerHTML = params.value;
      document.querySelector('html').onmousemove = function (event) {
        var elementDiv = document.querySelector('#extension');
        var xx = event.pageX - 10;
        var yy = event.pageY + 15;
        elementDiv.style.top = yy + 'px';
        elementDiv.style.left = xx + 'px';
      };
    }
  });
  chart.on('mouseout', function (params) {
    //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
    if (params.componentType == 'xAxis') {
      var elementDiv = document.querySelector('#extension');

      elementDiv.style.cssText = 'display:none';
    }
  });
};
const project = ref();
let chart: any;
const data = ref([]);
const xAxis = ref([]);
onMounted(() => {
  getData();
});
onUnmounted(() => {
  if (!chart) {
    return;
  }
  chart.clear();
  chart.dispose();
  chart = null;
});
const getData = async () => {
  const res = await getProject();
  _total.value = res.data.length;
  if (res.code == 200) {
    const list = res.data as any[];
    list.forEach((item: any) => {
      data.value.push(item.count);
      xAxis.value.push(item.name);
    });
    _num.value = 0;
    nextTick(() => {
      init();
    });
  }
};

const init = () => {
  if (!project.value) return;
  if (chart) {
    chart.clear();
    chart.dispose();
  }
  chart = echarts.init(project.value);
  // [0, 1, 1, 1, 1, 1, 18, 24, 27, 28, 30, 56];
  let total = 0;
  let bgData = [];
  _dataInfo.value.forEach((item: any) => {
    total += item;
  });
  _dataInfo.value.forEach((item: any) => {
    bgData.push(total);
  });
  // data.reverse();
  let xData = xAxis.value || [
    '新洲区',
    '黄陂区',
    '汉南区',
    '东西湖区',
    '蔡甸区',
    '江夏区',
    '青山区',
    '江岸区',
    '武昌区',
    '汉阳区',
    '硚口区',
    '洪山区',
  ];
  // xData.reverse();
  let option = {
    grid: {
      top: '10%',
      left: '10%',
      right: '10%',
      bottom: '15%',
      // containLabel: true,
    },
    color: ['#DADEDE'],
    // dataZoom: [
    //   {
    //     type: 'inside',
    //     start: 0,
    //     end: 50,
    //     yAxisIndex: 0,
    //   },
    // ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      // boundaryGap: [0, 0.01],
      splitLine: {
        show: false,
      },
      triggerEvent: true,
      axisLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.14)',
        },
      },
      axisLabel: {
        interval: 0,
        color: 'rgba(255, 255, 255, 0.6)',
        formatter: function (value) {
          if (value.length > 4) {
            // 假设超过4个字符就显示省略号
            return value.slice(0, 4) + '...'; // 显示前5个字符并添加省略号
          }
          return value;
        },
      },

      data: _xAxis.value,
    },
    yAxis: {
      type: 'value',
      max: maxValue.value,
      min: 0,
      axisLabel: {
        show: true,
        color: 'rgba(255, 255, 255, 0.6)',
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        //show: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.14)', //里面横着的虚线
        },
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        // name: '2011',
        type: 'bar',
        data: _dataInfo.value,
        barWidth: 20,
        itemStyle: {
          barBorderRadius: 7.5,
        },
        label: {
          show: true,
          position: 'top',
          color: 'rgba(255, 255, 255, 0.6)',
          distance: 10,
        },
      },
      // {
      //   // name: '2011',
      //   type: 'bar',
      //   data: bgData,
      //   barWidth: 20,
      //   barGap: '-100%',
      //   itemStyle: {
      //     // barBorderRadius: 7.5,
      //     color: 'rgba(140,140,140,0.1)',
      //   },
      //   label: {
      //     show: false,
      //   },
      // },
    ],
  };
  chart.setOption(option);
  extension(chart);
  addEventListener('resize', function () {
    chart && chart.resize();
  });
};
</script>

<style lang="scss" scoped>
.body-project {
  height: 100%;
  #project {
    height: calc(100% - 6vh);
  }
}
:deep(.ant-btn) {
  border: none;
}
.page_config {
  .left {
    margin-right: 1vh;
  }
}
</style>
